<template>
  <div class="ranking-container">
    <h3 class="ranking-title">修单排行榜</h3>
    <el-table
        :data="rankingData"
        stripe
        border
        style="width: 100%"
        height="500"
    >
      <!-- 用自定义列显示 rank（不要用 type="index"） -->
      <el-table-column
          label="排名"
          width="90"
          align="center"
      >
        <template #default="scope">
          <span v-if="scope.row.rank === 1" class="rank gold">🥇</span>
          <span v-else-if="scope.row.rank === 2" class="rank silver">🥈</span>
          <span v-else-if="scope.row.rank === 3" class="rank bronze">🥉</span>
          <span v-else>{{ scope.row.rank }}</span>
        </template>
      </el-table-column>

      <el-table-column
          prop="nickName"
          label="姓名"
          width="140"
      />

      <el-table-column
          prop="total"
          label="修单数"
          min-width="160"
      >
        <template #default="scope">
          <el-progress
              :text-inside="true"
              :stroke-width="18"
              :percentage="calcPercentage(scope.row.total)"
              :color="getColor(scope.row.rank)"
              :format="() => scope.row.total"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getRankingList } from '@/api/wxz/order.js'

const rankingData = ref([])
const maxValue = ref(1)

// 计算百分比（相对于最大值）
const calcPercentage = (value) => {
  const v = Number(value) || 0
  if (!maxValue.value) return 0
  return Math.round((v / maxValue.value) * 100)
}

// 根据名次返回颜色（前3名特殊色）
const getColor = (rank) => {
  if (rank === 1) return '#f56c6c' // 金（可自定义）
  if (rank === 2) return '#e6a23c' // 银
  if (rank === 3) return '#67c23a' // 铜
  return '#409eff' // 其他
}

onMounted(async () => {
  try {
    const res = await getRankingList()
    let list = res.data || []

    // 规范 total 为数字，避免字符串比较问题
    list = list.map(item => ({
      ...item,
      total: Number(item.total || 0)
    }))

    // 按 total 降序。若 total 相同，可用昵称作为二次排序保证稳定
    list.sort((a, b) => {
      if (b.total === a.total) return (a.nickName || '').localeCompare(b.nickName || '')
      return b.total - a.total
    })

    // 计算竞争排名（1,1,3），相同 total 共享同一 rank
    let prevTotal = null
    let prevRank = 0
    for (let i = 0; i < list.length; i++) {
      if (i === 0) {
        list[i].rank = 1
        prevRank = 1
        prevTotal = list[i].total
      } else {
        if (list[i].total === prevTotal) {
          list[i].rank = prevRank
        } else {
          list[i].rank = i + 1
          prevRank = list[i].rank
          prevTotal = list[i].total
        }
      }
    }

    rankingData.value = list
    // 计算进度条的最大值（至少 1）
    maxValue.value = Math.max(1, ...list.map(it => it.total || 0))
  } catch (e) {
    console.error('获取排行榜失败:', e)
  }
})
</script>

<style scoped>
.ranking-container {
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 60px;
}
.ranking-title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-top: 0;
}
.rank {
  font-size: 18px;
}
.gold {
  color: #f5b642;
}
.silver {
  color: #bfc5ca;
}
.bronze {
  color: #cd7f32;
}
</style>
